<template>
	<view :data-theme="theme">
		<tui-skeleton v-if="skeletonShow"></tui-skeleton>

		<!-- <div class="statusBarHeight"></div> -->
		<view class="head-wrap">
			<u-navbar
				bgColor="transparent"
				:safeAreaInsetTop="true"
				:fixed="false"
				:border="false"
				:placeholder="true"
			>
				<template #center>
					<view class="header" :style="{ paddingRight: paddingRight + 'px' }">
						<view class="search" @click="search()">
							<view class="search_input tui-skeleton-fillet">
								<view class="text-ccc">{{ $t("page.goodsSearch.place") }}</view>
								<view class="input_btn">{{
									$t("page.goodsSearch.search")
								}}</view>
							</view>
						</view>
					</view>
				</template>
			</u-navbar>
			<view
				class="tui-skeleton-rect"
				:class="indexBannerType == 1 ? 'swiperlone' : 'swipershort'"
			>
				<swiper
					:indicator-dots="true"
					:indicator-active-color="indicatorBg"
					:autoplay="true"
					circular="true"
					interval="3000"
					duration="500"
				>
					<block v-for="(item, index) in imgUrls" :key="index">
						<swiper-item>
							<view class="slide-image" @click="menusTap(item.url)">
								<!-- <image :src="item.pic" mode="widthFix"></image> -->
								<easy-loadimage mode="widthFix" :image-src="item.pic" />
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>
			<view class="nav">
				<view class="menu">
					<view
						class="menu_item tui-skeleton-fillet nav-item-wrapper"
						v-for="(item, index) in menuList"
						:key="index"
						@click="menusTap(item.url)"
					>
						<easy-loadimage :image-src="item.pic" :key="item.pic" />
						<text class="menu_name tui-skeleton-rect">{{
							item.translateName
						}}</text>
					</view>
				</view>
				<!-- <coupons></coupons> -->
			</view>
		</view>
		<view class="page-index tui-skeleton">
			<view class="page_content">
				<!-- <view class="swiperlone tui-skeleton-rect" :class="indexBannerType==1?'swiperlone':'swipershort'">
					<swiper :indicator-dots="true" :indicator-active-color="indicatorBg" :autoplay="true"  circular="true" interval="2500" duration="500" >
						<block v-for="(item,index) in imgUrls" :key="index">
							<swiper-item>
								<view class="slide-image" @click="menusTap(item.url)">
									<easy-loadimage mode="widthFix"  :image-src="item.pic"></easy-loadimage>
								</view>
							</swiper-item>
						</block>
					</swiper>
				</view> -->
				<!-- <view class="swiperlone tui-skeleton-rect" :class="indexBannerType==1?'swiperlone':'swipershort'">
					<swiper :indicator-dots="true" :indicator-active-color="indicatorBg" :autoplay="true"  circular="true" interval="2500" duration="500" >
						<block v-for="(item,index) in imgUrls" :key="index">
							<swiper-item>
								<view class="slide-image" @click="menusTap(item.url)">
									<easy-loadimage mode="widthFix"  :image-src="item.pic"></easy-loadimage>
								</view>
							</swiper-item>
						</block>
					</swiper>
				</view> -->
				<!-- <view v-show="indexBannerType==2">
					<view class="swipershort tui-skeleton-rect">
						<swiper :indicator-dots="true" :autoplay="true"  circular="true" interval="2500" duration="500" >
							<block v-for="(item,index) in imgUrls" :key="index">
								<swiper-item>
									<view @click="menusTap(item.url)">
										<image :src="item.pic" class="slide-image" lazy-load></image>
									</view>
								</swiper-item>
							</block>
						</swiper>
					</view>
				</view> -->
				<!-- nav 地址栏 优惠券 -->
				<!-- <view class="nav">
					<view class="menu">
						<view
							class="menu_item tui-skeleton-fillet"
							v-for="(item, index) in menuList"
							:key="index"
							@click="menusTap(item.url)"
						>
							<easy-loadimage :image-src="item.pic" :key="item.pic" />
							<text class="menu_name tui-skeleton-rect">{{ item.name }}</text>
						</view>
					</view>
					<coupons></coupons>
				</view> -->
				<!-- recommended 特色产品 -->
				<!-- <block v-for="(item, index) in activityindexList" :key="index">
					<recommended v-if="item.type === 1" :activityData="item"></recommended>
					<promotions v-if="item.type === 2" :activityData="item"></promotions>
					<first-new v-if="item.type === 3" :activityData="item"></first-new>
				</block> -->
				<!-- 店铺入口 -->
				<index-shop :shopList="rankingList"></index-shop>
				<!-- categories 特色分类 -->
				<!-- <categories :categoryList="categoryList"></categories> -->
				<!-- middle_banner 轮播广告 -->
				<!-- <view class="middle_banner tui-skeleton-fillet">
				 	<swiper :indicator-dots="false" :autoplay="true"  circular="true" interval="2500" duration="500" >
				 		<block v-for="(item,index) in bastBanner" :key="index">
				 			<swiper-item>
				 				<view @click="menusTap(item.url)">
				 					<image :src="item.pic" class="slide-image" lazy-load></image>
				 				</view>
				 			</swiper-item>
				 		</block>
				 	</swiper>
				 </view> -->
				<!-- 底部商品列表 -->
				<view v-if="tempArr.length > 0" class="waterfall">
					<view class="index-product-wrapper">
						<view class="waterfall_title">{{ $t(`page.index.titAlso`) }}</view>
						<view class="list-box animated">
							<WaterfallsFlow :wfList="tempArr" :type="1" :isStore="1" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
			<user-drawer @close="closeDrawer"></user-drawer>
		</tui-drawer>
	</view>
</template>
<script>
import { setThemeColor } from "@/utils/setTheme.js";
import coupons from "./components/coupons.vue";
import recommended from "./components/recommended.vue";
import indexSwiperItem from "./components/indexSwiperItem.vue";
import promotions from "./components/promotions.vue";
import firstNew from "./components/firstNew.vue";
import categories from "./components/categories.vue";
import indexShop from "./components/shop.vue";
import WaterfallsFlow from "@/components/WaterfallsFlow/WaterfallsFlow.vue";
import { getGroomList, getActivityindexList } from "@/api/store.js";
import { getIndexData, setCouponReceive } from "@/api/api.js";
import Cache from "@/utils/cache.js";
import { goShopDetail } from "@/libs/order.js";
import { toTranslateLang, mapToLang } from "@/utils/index.js";
import { useAppStore } from "@/stores/app";
const appStore = useAppStore();
export default {
	data() {
		return {
			skeletonShow: true,
			logoUrl: "",
			params: {
				//精品推荐分页
				page: 1,
				limit: 10,
			},
			goodScroll: true,
			loaded: false,
			loading: false,
			iSshowH: false,
			imgUrls: [],
			menuList: [],
			tempArr: [],
			bastBanner: [],
			loading: false,
			rightDrawer: false,
			activityindexList: [],
			categoryList: [],
			rankingList: [],
			indexBannerType: "1",
			customBarH: 0,
			theme: "",
			paddingRight: 0,
			indicatorBg: "#00785E",
			refresh: false,
		};
	},
	computed: {
		locale() {
			return mapToLang(this.$i18n.locale);
		},
	},
	components: {
		WaterfallsFlow,
		coupons,
		recommended,
		indexSwiperItem,
		promotions,
		firstNew,
		categories,
		indexShop,
	},
	onPullDownRefresh() {
		this.refresh = true;
		this.params.page = 1;

		this.getIndexConfig();
		this.getActivityindex();

		uni.stopPullDownRefresh();
	},
	// 滚动监听
	onPageScroll(e) {
		// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
		uni.$emit("scroll");
	},
	onLoad() {
		uni.setNavigationBarTitle({
			title: this.$t(`page.store.merInfo`),
		});
		// let locale = (navigator.language || navigator.browserLanguage).toLowerCase();
		// uni.setStorageSync('locale', locale);
		uni.setNavigationBarTitle({
			title: this.$t(`userDrawer.data[0].name`),
		});
		this.getIndexConfig();
		this.getActivityindex();
	},
	mounted() {
		// #ifdef MP-WEIXIN
		this.paddingRight = uni.getMenuButtonBoundingClientRect().width;
		// #endif
		this.theme = "theme3";

		this.indicatorBg = setThemeColor();
	},
	methods: {
		// 去详情页
		godDetail(item) {
			goShopDetail(item);
		},
		getActivityindex() {
			getActivityindexList()
				.then((res) => {
					this.activityindexList = res.data;
				})
				.catch((res) => {
					return this.$util.Tips({
						title: res,
					});
				});
		},
		open() {
			this.rightDrawer = true;
		},
		closeDrawer(e) {
			this.rightDrawer = false;
			if (!e) {
				this.rightDrawer = false;
			}
		},
		search() {
			uni.navigateTo({
				url: "/pages/goods_search/index",
			});
		},
		menusTap(url) {
			if (appStore.tabBar.includes(url)) {
				uni.switchTab({
					url,
				});
			} else {
				uni.navigateTo({
					url,
				});
			}
		},
		// 首页数据
		getIndexConfig: function () {
			let that = this;
			getIndexData()
				.then((res) => {
					that.$set(that, "logoUrl", res.data.logoUrl);
					that.$set(that, "imgUrls", res.data.banner);
					res.data.menus = toTranslateLang(res.data.menus, this.locale);
					console.log("res.data.menus", res.data.menus);
					that.$set(that, "menuList", res.data.menus); //bastBanner
					that.$set(that, "bastBanner", res.data.bastBanner); //bastBanner
					that.$set(that, "categoryList", res.data.categoryList); //categoryList
					res.data.ranking = toTranslateLang(res.data.ranking, this.locale);
					that.$set(that, "rankingList", res.data.ranking);
					that.$set(that, "indexBannerType", res.data.indexBannerType);
					// 保存商品分类页配置
					that.$Cache.setItem({
						name: "categoryConfig",
						value: {
							categoryConfig: res.data.categoryPageConfig,
							isShowCategory: res.data.isShowCategory,
						},
					});
					appStore.SET_CHATURL(res.data.consumerH5Url);
					Cache.setItem({
						name: "merPlatChatConfig",
						value: {
							consumerHotline: res.data.consumerHotline, //客服电话
							consumerH5Url: res.data.consumerH5Url, //云智服
							consumerMessage: res.data.consumerMessage, //基于facebook的message消息
							consumerEmail: res.data.consumerEmail, //客服邮箱
							consumerType: res.data.consumerType, //客服类型四选一
						},
					});
					this.skeletonShow = false;
					this.getGroomList();
				})
				.catch((err) => {
					this.skeletonShow = false;
					return this.$util.Tips({
						title: err,
					});
				});
		},
		// 精品推荐
		getGroomList(onloadH) {
			this.loading = true;
			let type = this.goodType;
			if (!this.goodScroll && !this.refresh) return;
			if (onloadH) {
				this.iSshowH = true;
			}
			getGroomList(this.params).then(({ data }) => {
				this.iSshowH = false;
				this.loading = false;
				this.goodScroll = data.list.length >= this.params.limit;
				this.params.page++;
				if (this.refresh) {
					this.refresh = false;
					this.tempArr = data.list;
				} else {
					this.tempArr = this.tempArr.concat(data.list);
				}
			});
		},
		goDetail(item) {
			uni.navigateTo({
				url: `/pages/goods_details/index?id=${item.id}`,
			});
		},
	},
	// 滚动到底部
	onReachBottom() {
		if (this.params.page != 1) {
			this.getGroomList();
		}
	},
};
</script>
<style lang="scss" scoped>
.page-index {
	// padding: 0 24rpx 0;
	position: relative;
	z-index: 4;
}
.text-ccc {
	text-align: left;
	width: auto;
	margin-left: 20rpx;
}

.statusBarHeight {
	@include main_bg_color(theme);
}
.header {
	margin: 0 24rpx;
	flex: 1;
	// @include main_bg_color(theme);
	display: flex;
	align-items: center;
	.logo {
		width: 138rpx;
		height: 48rpx;
		margin: 0 30rpx 0;
	}
	image {
		width: 138rpx;
		height: 48rpx;
	}
	.search {
		width: 100%;
		.search_input {
			width: 100%;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 36rpx;
			background: #ffffff;
			border: 3px solid #00785e;
			@include coupons_border_color(theme);
			border-radius: 35rpx;
			position: relative;
			.input_btn {
				position: absolute;
				top: 5rpx;
				right: 5rpx;
				width: 120rpx;
				height: 60rpx;
				@include main_bg_color(theme);
				border-radius: 60rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}
	.open {
		width: 40rpx;
		height: 36rpx;
		color: #fff;
		font-size: 40rpx;
		margin: 0 36rpx 0 30rpx;
		display: flex;
		align-items: center;
	}
}

.swipershort {
	margin: 10rpx 24rpx 24rpx;
	position: relative;
	width: calc(100% - 48rpx);
	height: 240rpx;
	border-radius: 20rpx;
	overflow: hidden;
	margin-bottom: 24rpx;
	z-index: 10;
	swiper,
	.swiper-item,
	.slide-image {
		width: 100%;
		height: 100%;
		height: 240rpx;
		border-radius: 20rpx;
	}
}
.swiperlone {
	width: 100%;
	swiper,
	.swiper-item {
		height: 350rpx;
	}
	.slide-image,
	::v-deep .easy-loadimage > uni-image > div,
	uni-image > img,
	::v-deep .easy-loadimage > uni-image {
		width: 100%;
		height: 350rpx;
		overflow: initial !important;
	}
}
.page_content {
	.nav {
		width: 100%;
		// background: linear-gradient(180deg, #F5F5F5 0%, #FFFFFF 100%);
		margin-top: 24rpx;
		box-sizing: border-box;
		.menu {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.menu_item {
				width: 156rpx;
				height: 148rpx;
				background: #ffffff;
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.easy-loadimg-wrap {
					width: 156rpx;
					height: 148rpx;
					border: 2rpx solid red;
				}
				easy-loadimage,
				.easy-loadimage,
				image,
				uni-image a {
					width: 60rpx;
					height: 60rpx;
				}
				.menu_name {
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					padding-top: 16rpx;
				}
			}
		}
	}

	.middle_banner {
		width: 690rpx;
		height: 115rpx;
		margin: 70rpx auto 0;
		swiper,
		.swiper-item {
			height: 115rpx !important;
		}
		image {
			width: 100%;
			height: 115rpx;
		}
	}
	.waterfall {
		margin-top: 24rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 0 24rpx 0;
		.waterfall_title {
			font-size: 32rpx;
			font-weight: bold;
			color: $jcg-font-color;
			padding: 30rpx 0 32rpx 0;
		}
		jcg .index-product-wrapper {
			padding-bottom: 110rpx;
			&.on {
				min-height: 1500rpx;
			}
			.list-box {
				.item {
					width: 340rpx;
					margin-bottom: 22rpx;
					background-color: #fff;
					border-radius: 10rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 330rpx;
					}

					.text-info {
						padding: 10rpx 20rpx 15rpx;

						.title {
							color: #222222;
						}

						.old-price {
							margin-top: 8rpx;
							font-size: 26rpx;
							color: #aaaaaa;
							text-decoration: line-through;
							font-weight: normal !important;
							text {
								margin-right: 2px;
								font-size: 20rpx;
							}
						}

						.price {
							display: flex;
							align-items: flex-end;
							@include price-color(theme);
							font-size: 34rpx;
							font-weight: 800;
							margin-top: 0;
							text {
								padding-bottom: 4rpx;
								font-size: 24rpx;
								font-weight: 800;
							}

							.txt {
								display: flex;
								align-items: center;
								justify-content: center;
								width: 28rpx;
								height: 28rpx;
								margin-left: 15rpx;
								margin-bottom: 10rpx;
								border: 1px solid $theme-color;
								border-radius: 4rpx;
								font-size: 22rpx;
								font-weight: normal;
							}
						}
					}
				}

				&.on {
					display: flex;
				}
			}
		}
	}
}

.ceshi {
	color: var(--color);
}
.head-wrap {
	background-color: #fff;
	padding-bottom: 20rpx;
	border-radius: 12rpx;
	.nav {
		width: 100%;
		// background: linear-gradient(180deg, #F5F5F5 0%, #FFFFFF 100%);
		margin-top: 24rpx;
		box-sizing: border-box;
		padding: 0 12rpx;
		.menu {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.menu_item {
				width: 156rpx;
				height: 148rpx;
				background: #ffffff;
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				easy-loadimage,
				.easy-loadimage,
				image,
				uni-image a {
					width: 60rpx;
					height: 60rpx;
				}
				.menu_name {
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					padding-top: 16rpx;
				}
			}
		}
	}
}
.head-wrap .nav .menu .menu_item.nav-item-wrapper {
	::v-deep .easy-loadimage {
		width: 48rpx;
		height: 48rpx;
	}
}
</style>
